<template>
    <div>
        <h1>Home Page</h1>
        <p v-if="error">{{ error }}</p>
        <p v-if="loading">加载中...</p>
        <ul v-if="users.length">
            <li v-for="user in users" :key="user.id">
                {{ user.username }} - {{ user.email }} - 性别: {{ user.sex === '1' ? '男' : '女' }} - 电话: {{ user.phone }} - 地址: {{ user.address }}
            </li>
        </ul>
    </div>
</template>

<script>
import axios from '@/api/axios.js'; // 引入 axios 实例

//frontend/src/views/Home.vue
export default {
    data() {
        return {
            users: [],
            error: null,
            loading: true, // 添加 loading 状态
        };
    },
    async created() {
        try {
            const token = localStorage.getItem('token'); // 从 localStorage 获取 token
            const response = await axios.get('/getAllUsers', {
                headers: {
                    Authorization: `Bearer ${token}`, // 将 token 添加到请求头
                },
            });
            this.users = response.data.data; // 假设返回结构是 response.data.data
        } catch (err) {
            this.error = `无法获取用户数据: ${err.message}`; // 显示具体错误信息
        } finally {
            this.loading = false; // 请求完成后隐藏加载提示
        }
    },
};
</script>

<style>
/* 可以在这里添加样式 */
</style>
